<template>
    <div class="article_details_comments_box outer_shadows">
        <p class="article_details_comments_header">评论列表{{size}}</p>
        <ul class="article_details_comments_list">
            <li v-for="(item,index) in comments.list" :key="index">
                <img :src="digital.avatar(item.email)" alt="" class="article_details_comments_avatar">
                <div class="article_details_comments_content">
                    <div class="article_details_comments_browser">
                        <img :src="item.systems" alt="">
                        <img :src="item.browser" alt="">
                    </div>
                    <div class="article_details_comments_content_header">
                        <span class="article_details_comments_user">@{{ item.username }}</span>
                        <span class="article_details_comments_time">{{dayjs(item.time).format(base.timeFormat) }}</span>
                    </div>
                    <p class="article_details_comments_body">{{ item.content }}</p>

                    <div v-if="bool_c === index" class="article_details_comments_publication">
                        <span class="article_details_comments_publication_title">@{{ item.username }}</span>
                        <span class="article_details_comments_publication_dis" @click="reply(index,true)">X</span>
                    </div>
                    <ArticleDetailsPublication @replySub="reply_sub"
                                               :username="item.username"
                                               v-if="bool_c === index"></ArticleDetailsPublication>
                    <ArticleNestedComments @reply_sub="reply_sub" :list="item.comments"></ArticleNestedComments>

                </div>

                <img src="/public/img/huifu.png" alt="" class="article_details_comments_reply"
                     v-show="store.state.user && item.uid !== store.state.user.id"
                     @click="reply(index,false)">
            </li>
        </ul>

    </div>
</template>

<script setup>

import base from "@/config/constant/constant.js"
import ArticleDetailsPublication from "@/components/detail/ArticleDetailsPublication.vue";
import {ref} from "vue";
import dayjs from "dayjs";
import ArticleNestedComments from "@/components/detail/ArticleNestedComments.vue";
import store from "@/store/index.js";
import digital from "@/config/methods/digital.js";
import api from "@/request/index.js";

//评论内容列表,文章id以及用户信息
const comments = defineProps({
    list: Array,
    replyInfo: Object,
    size:Number
})

//emit 自定义事件
const emit = defineEmits(['reply_sub'])


//是否显示回复框
const bool_c = ref(-1);


//当前展开的子评论下标
const replyIndex = ref(-1);


//提交评论内容
const reply_sub = (info) => {
    bool_c.value = -1; //关闭评论框
    //将评论提交到列表
    emit('reply_sub', info, replyIndex.value, true);
};


//关闭评论框,无操作内容
const reply = (index, bool) => {
    if (bool) {
        bool_c.value = -1; //关闭评论框
    } else {
        bool_c.value = index;
    }
    replyIndex.value = index;
    emit('reply_sub', null, bool);
};


</script>

<style scoped>
.article_details_comments_box {
    width: 100%;
    padding: 20px;
    font-size: 15px;
}

.article_details_comments_header {
    border-left: 3px solid #6da6e1;
    font-size: 16px;
    padding: 2px 5px;
}

.article_details_comments_list {
    width: 100%;
    list-style: none;
}

.article_details_comments_avatar {
    width: 35px;
    height: 35px;
    border-radius: 3px;
}

.article_details_comments_list li {
    position: relative;
    display: flex;
    min-height: 110px;
    justify-content: space-between;
    margin: 10px;
}

.article_details_comments_list li:hover .article_details_comments_reply {
    display: inline-block;
}

.article_details_comments_content {
    width: 100%;
    padding: 10px;
}

.article_details_comments_content_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 0 5px;
}

.article_details_comments_time {
    font-size: 13px;
}

.article_details_comments_user {
    font-size: 15px;
}

.article_details_comments_body {
    padding-left: 10px;
}

.article_details_comments_browser {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.article_details_comments_browser img {
    width: 15px;
    height: 15px;
    margin-right: 8px;

}

.article_details_comments_reply {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 18px;
    cursor: pointer;
    transition: all .3s;
}

.article_details_comments_reply:hover {
    background: rgba(109, 166, 225, 0.18);
}

.article_details_comments_publication {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 0;
    font-size: 18px;
}

.article_details_comments_publication span:first-child {
    font-size: 16px;
}

.article_details_comments_publication .article_details_comments_publication_dis {
    width: 20px;
    height: 20px;
    cursor: pointer;
    border-radius: 50%;
    background: #6da6e1;
    line-height: 20px;
    text-align: center;
    padding-left: 1px;
    color: white;
    transition: all .3s;
}

.article_details_comments_publication_dis:hover {
    opacity: .7;
}

.article_details_comments_publication_title {
    display: inline-block;
    border-left: 3px solid #6da6e1;
    font-size: 14px;
    padding: 0 5px;
}

</style>